// import Image from "next/image"

// export default function MaterialsPage() {
//   const materials = [
//     {
//       title: "网络主播基础教程",
//       description: "涵盖主播基本素养、表达技巧、镜头感等基础知识",
//       price: "￥99",
//       image:
//         "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E8%AF%BE%E7%A8%8B%E5%B0%81%E9%9D%A2.jpg-yLyGTdeTOr0iTUfy7YLYFPkpZf7H2h.jpeg",
//       features: ["网络主播操守合规", "网络内容安全合规", "网络主播营销合规", "主播封号与解封导引", "网络主播纳税合规"],
//     },
//     {
//       title: "直播带货实战手册",
//       description: "详解直播带货技巧、产品讲解方法、成交转化策略",
//       price: "￥129",
//       image:
//         "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E8%AF%BE%E7%A8%8B%E5%B0%81%E9%9D%A2.jpg-yLyGTdeTOr0iTUfy7YLYFPkpZf7H2h.jpeg",
//       features: ["产品选品技巧", "直播话术设计", "互动引导方法", "成交转化策略", "售后服务体系"],
//     },
//   ]

//   return (
//     <main className="min-h-screen">
//       <div className="bg-primary text-white py-20">
//         <div className="container mx-auto px-4">
//           <h1 className="text-4xl font-bold text-center mb-6">培训教材</h1>
//           <p className="text-xl text-center max-w-3xl mx-auto">专业的培训教材，助您系统掌握直播技能</p>
//         </div>
//       </div>

//       <section className="py-20">
//         <div className="container mx-auto px-4">
//           <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
//             {materials.map((material, index) => (
//               <div key={index} className="bg-white rounded-lg shadow-sm overflow-hidden">
//                 <div className="relative h-64">
//                   <Image
//                     src={material.image || "/placeholder.svg"}
//                     alt={material.title}
//                     fill
//                     className="object-contain"
//                   />
//                 </div>
//                 <div className="p-6">
//                   <h3 className="text-xl font-bold mb-2">{material.title}</h3>
//                   <p className="text-gray-600 mb-4">{material.description}</p>
//                   {material.features && (
//                     <ul className="mb-4 space-y-2">
//                       {material.features.map((feature, idx) => (
//                         <li key={idx} className="flex items-center text-sm text-gray-600">
//                           <span className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-primary/10 text-primary rounded-full mr-2">
//                             {idx + 1}
//                           </span>
//                           {feature}
//                         </li>
//                       ))}
//                     </ul>
//                   )}
//                   <div className="flex justify-between items-center">
//                     <span className="text-primary font-bold">{material.price}</span>
//                     <button className="px-4 py-2 bg-primary text-white rounded-md">立即购买</button>
//                   </div>
//                 </div>
//               </div>
//             ))}
//           </div>
//         </div>
//       </section>

//       <section className="py-20 bg-gray-50">
//         <div className="container mx-auto px-4">
//           <h2 className="text-3xl font-bold text-center mb-12">教材特色</h2>
//           <div className="grid md:grid-cols-3 gap-8">
//             {[
//               { title: "系统性", content: "知识体系完整，层次分明" },
//               { title: "实用性", content: "理论结合实践，即学即用" },
//               { title: "更新快", content: "及时更新行业最新动态" },
//             ].map((feature, index) => (
//               <div key={index} className="text-center">
//                 <h3 className="text-xl font-bold mb-4">{feature.title}</h3>
//                 <p className="text-gray-600">{feature.content}</p>
//               </div>
//             ))}
//           </div>
//         </div>
//       </section>

//     </main>
//   )
// }

import Image from "next/image"
import { ArrowRight } from "lucide-react"

const services = [
  {
    title: "网络主播合规管控（上）",
    subtitle: "专业培训教材",
    // image:"/kecheng.jpg",
      image:"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250308125509.jpg-wHUCZlScWW5OTGnpAPJbtBbTegnkyV.jpeg",
  },
  {
    title: "网络主播合规管控（下）",
    subtitle: "专业培训教材",
    // image:"/kecheng.jpg",
      image:"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250308125526.jpg-n1gfU6CQGc7unrCFlcPjAUn3bT4iei.jpeg",
  },
]

export default function Services() {
  return (
  <main className="min-h-screen">
    <div className="bg-primary text-white py-20">
            <div className="container mx-auto px-4">
             <h1 className="text-4xl font-bold text-center mb-6">培训教材</h1>
              <p className="text-xl text-center max-w-3xl mx-auto">专业的培训教材，助您系统掌握直播技能</p>
         </div>
      </div>
      <section className="py-24">
      <div className="container mx-auto px-4">
        {/* <h2 className="text-3xl font-bold text-center mb-16">培训教材</h2> */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-16 max-w-5xl mx-auto">
          {services.map((service, index) => (
            <div
              key={index}
              className="group relative overflow-hidden rounded-lg cursor-pointer shadow-lg hover:shadow-xl transition-all duration-300 max-w-xs w-full mx-auto"
            >
              <div className="relative aspect-[561/763]">
                <Image
                  src={service.image || "/placeholder.svg"}
                  alt={service.title}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-105"
                />
              </div>
              {/* <div className="w-full bg-accent/90 p-6 flex justify-between items-center absolute bottom-0 left-0 right-0">
                <div>
                  <h3 className="text-white text-xl font-semibold">{service.title}</h3>
                  <p className="text-white/90">{service.subtitle}</p>
                </div>
                <ArrowRight className="text-white w-6 h-6" />
              </div> */}
            </div>
          ))}
        </div>
      </div>
    </section>
    </main>
  )
}